<template>
  <div class="role">
    <page-search :search-config="searchConfig"></page-search>
    <page-content
      ref="contentRef"
      @new-click="handleNewClick"
      @edit-click="handleEditClick"
      :content-config="contentCofig"
    />
    <page-modal
      ref="modalRef"
      :modal-config="modalConfig"
      :other-info="otherInfo"
    >
      <!-- 自定义/插槽 -->
      <template #menuList>
        <el-tree
          ref="treeRef"
          :data="entireMenus"
          show-checkbox
          node-key="id"
          highlight-current
          :props="{ children: 'children', label: 'name' }"
          @check="handleCheckClick"
        />
      </template>
    </page-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue"
import { ElTree } from "element-plus"
import { storeToRefs } from "pinia"
import usePageContent from "@/hooks/usePageContent"
import usePageModal from "@/hooks/usePageModal"

import pageSearch from "@/components/page-search/page-search.vue"
import searchConfig from "./config/search.config"

import pageContent from "@/components/page-content/page-content.vue"
import contentCofig from "./config/content.config"

import pageModal from "@/components/page-modal/page-modal.vue"
import modalConfig from "./config/modal.config"

import { mapMenusToIds } from "@/utils/map-menus"

// 获取菜单列表
import useMainStore from "@/stores/main/main"

const mainStore = useMainStore()
const { entireMenus } = storeToRefs(mainStore)

// 点击菜单树
const otherInfo = ref<any>({})
function handleCheckClick(data1: any, data2: any) {
  console.log(data1, data2)
  const menuList = [...data2.checkedKeys, ...data2.halfCheckedKeys]
  // console.log(menuList)
  otherInfo.value = { menuList }
}
const treeRef = ref<InstanceType<typeof ElTree>>()
function editCallback(itemData: any) {
  nextTick(() => {
    treeRef.value?.setCheckedKeys(mapMenusToIds(itemData.menuList))
  })
}

//使用hooks
const { contentRef, handleQueryClick, handleResetClick } = usePageContent()
//点击modal
const { modalRef, handleNewClick, handleEditClick } = usePageModal(editCallback)
</script>
<style scoped lang="less"></style>
